<template>
  <div id="app">
    <div :class="classOne">class绑定样式1</div>
    <div :class="classTwo">class绑定样式2</div>
    <div :class="classThree">class绑定样式3</div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      classOne: "box",
      classTwo: ["box", "boxborder"],
      classThree: {
        box: true,
        boxborder: true,
        boxfont: false,
      },
    };
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}
.boxborder {
  border: 2px solid red;
}
.boxfont {
  font-size: 18px;
}
</style>
